<template>
	<view>
		<navbar title="红包优惠券"></navbar>
		<view class="con">
			<view class="box">
				<view class="box__yhq">
					<image :src="'/static/yhq/z'+index+'.png'" v-for="(item,index) in 4" :key="index" class="box__yhq__pic" mode=""></image>
				</view>
			</view>
			<view class="box">
				<view class="box__title">
					温馨提示
				</view>
				<view class="" style="padding-bottom: 28rpx;">
					<view class="box__item" v-for="(item,index) in wxlist" :key="index">
						<image :src="'/static/yhq/i'+index+'.png'" class="box__item__index" mode=""></image>
						<view class="box__item__text">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				wxlist:[
					'优惠券信息以实际到达账户为准，请注意有效期',
					'活动中若出现刷单等违规行为，将取消获奖资格并作封号 处理:',
					'本活动最终解释权归主办方所有 ',
				]
			};
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.con {
		padding: 12rpx 30rpx;

		.box {
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 30rpx;
			&__yhq {
				padding: 23rpx 10rpx 12rpx 14rpx;
				background: #FFE398;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 2rpx dashed #FFE398;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				&__pic{
					width: 308rpx;
					height: 340rpx;
				}
			}
			&__title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #010909;
				line-height: 54rpx;
			}
			&__item{
				display: flex;
				margin-top: 18rpx;
				&__index{
					width: 29rpx;
					height: 31rpx;
					margin-right: 11rpx;
				}
				&__text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #010909;
					line-height: 30rpx;
				}
			}
		}
	}
</style>